<template>
  <demo-content :title="title">
    <p>
      浏览器通过事件对象传递给监听器的鼠标坐标是窗口坐标(window
      coordinate)，而不是相对于canvas自身的坐标。
    </p>
    <div>
      坐标信息：
      <ul>
        <li>
          客户端坐标，它提供事件发生时的应用客户端区域的坐标(与页面坐标不同)
          <ul>
            <li>x,y = ({{ x }}, {{ y }})</li>
            <li>clientX, clientY = ({{ clientX }}, {{ clientY }})</li>
          </ul>
        </li>
        <li>
          相对于整个文档的页面坐标:
          <ul>
            <li>pageX, pageY = ({{ pageX }}, {{ pageY }})</li>
          </ul>
        </li>
        <li>
          相对于目标节点的内填充边(padding edge) 左上角的坐标:
          <ul>
            <li>offsetX, offsetY = ({{ offsetX }}, {{ offsetY }})</li>
          </ul>
        </li>
        <li>
          相对于屏幕左上角的坐标，如果为多屏，则相对于主屏左上角坐标，因此值可能为负数：
          <ul>
            <li>screenX, screenY: ({{ screenX }}, {{ screenY }})</li>
          </ul>
        </li>
        <li>
          当前事件和上一个mousemove事件之间鼠标的移动值
          <ul>
            <li>movementX, movementY: ({{ movementX }}, {{ movementY }})</li>
          </ul>
        </li>
      </ul>
    </div>
    <canvas
      ref="canvasRef"
      width="200"
      height="100"
      style="margin: 50px; padding: 50px; border: 20px solid orange"
    ></canvas>
    <br />
    上述坐标说明如下图所示：<br />
    <img src="/mouse-event-pos.png" width="900" alt="坐标示例" />
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "坐标说明";
// 指定组件上的属性
defineOptions({ title });

const x = ref(0);
const y = ref(0);
const clientX = ref(0);
const clientY = ref(0);
const pageX = ref(0);
const pageY = ref(0);
const offsetX = ref(0);
const offsetY = ref(0);
const screenX = ref(0);
const screenY = ref(0);
const movementX = ref(0);
const movementY = ref(0);

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  ctx.save();
  ctx.fillStyle = "#00bfff55";
  ctx.fillRect(0, 0, 500, 250);
  ctx.restore();
  const spritesheet = new Image();
  spritesheet.src = "/running-sprite-sheet.png";
  spritesheet.onload = () => {
    // ctx.drawImage(spritesheet, 0, 0);
  };
  canvas.onmousemove = (e) => {
    x.value = e.x;
    y.value = e.y;
    clientX.value = e.clientX;
    clientY.value = e.clientY;
    pageX.value = e.pageX;
    pageY.value = e.pageY;
    offsetX.value = e.offsetX;
    offsetY.value = e.offsetY;
    screenX.value = e.screenX;
    screenY.value = e.screenY;
    movementX.value = e.movementX;
    movementY.value = e.movementY;
  };
});
</script>

<style src="./default.css" scoped></style>
